<template>
  <div style="display: flex;flex-direction: column;gap: 10px">
    <t-row class="card">
      <t-col v-for="(item,index) in panelList" :key="index" :span="3">
        <div class="header"><div class="title">{{item.title}}</div></div>
        <div class="header">
          <t-link  @click="toPath(item.path)" :style="{ fontSize: `36px`}" theme="primary" hover="color">{{ item.number }}</t-link>
        </div>
      </t-col>
    </t-row>
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="4">
        <t-card title="组别统计(人)">
          <chart-view @click="(data)=>{clickToIndex(data,'recommendMajor')}" :chartOption="chartOpt1" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="4">
        <t-card title="职称统计(人)">
          <chart-view @click="(data)=>{clickToIndex(data,'profTit')}" :chartOption="chartOpt2" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="4">
        <t-card title="学历统计(人)">
          <chart-view @click="(data)=>{clickToIndex(data,'education')}" :chartOption="chartOpt3" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
    </t-row>
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="4">
        <t-card title="学位统计(人)">
          <chart-view @click="(data)=>{clickToIndex(data,'degree')}" :chartOption="chartOpt6" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="8">
        <t-card title="年龄段(岁)"  class="dashboard-chart-card">
          <chart-view :chartOption="chartOpt7" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
    </t-row>
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="6">
        <t-card title="新入库专家数"  class="dashboard-chart-card">
          <template #actions>
            <t-radio-group @change="onExpertCountByTime" default-value="week">
              <t-radio-button value="week">周</t-radio-button>
              <t-radio-button value="month">月</t-radio-button>
              <t-radio-button value="year">年</t-radio-button>
            </t-radio-group>
          </template>
          <chart-view :chartOption="chartOpt4" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="6">
        <t-card title="专家活跃度"  class="dashboard-chart-card">
          <template #actions>
            <t-radio-group @change="onVitalityByTime" default-value="week">
              <t-radio-button value="week">周</t-radio-button>
              <t-radio-button value="month">月</t-radio-button>
              <t-radio-button value="year">年</t-radio-button>
            </t-radio-group>
          </template>
          <chart-view :chartOption="chartOpt8" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
    </t-row>
    <t-row align="stretch" :gutter="[16, 16]">
      <t-col :xs="12" :xl="12">
        <t-card title="单位专家总数排名" class="dashboard-rank-card">
          <t-table hover :data="deptRankData" :columns="deptRankColumns" rowKey="departmentId">
            <template #id="{ rowIndex }">
            <span :class="getRankClass(rowIndex)">
              {{ rowIndex + 1 }}
            </span>
            </template>
          </t-table>
        </t-card>
      </t-col>
    </t-row>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      allCount: 0,
      chartOpt1: {},
      chartOpt2: {},
      chartOpt3: {},
      chartOpt4: {},
      chartOpt5: {},
      chartOpt6: {},
      chartOpt7: {},
      chartOpt8: {},
      panelList: [
        {
          title: '专家总数',
          number: 0,
          path: '/zjk/expert/expert-index',
        },
      ],
      deptRankData:[],
      deptRankColumns:[
        {
          colKey: "id",
          title: "排行",
          align: "center",
        },
        {
          colKey: "deptName",
          title: "单位名称",
          align: "center",
          width: 180
        },
        {
          colKey: "count",
          title: "个数",
          align: "center",
        },
      ],

    }
  },
  created() {
    this.getByRecommendMajor();
    this.getByProfTit();
    this.getByEducation();
    this.getExpertCountByTime('week');
    this.getVitalityByTime('week');
    // this.getExpertCountByYear();
    this.getExpertProjectCount();
    this.getByDept();
    this.getByDegree();
    this.getAgeDistribution();
    this.getAllExpertCount();

  },
  methods: {
    toPath(ptah){
      this.$router.push(ptah);
    },
    getAllExpertCount(){
      this.$api.zjk.home.getAllExpertCount().then(response => {
        this.allCount = response.data.allCount;
        this.panelList[0].number = response.data.allCount;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getVitalityByTime(value){
      this.$api.zjk.home.getVitalityByTime(value).then(response => {
        const data1 = [];
        response.data.forEach(val => {
          data1.push(val.time)
        })
        const data2 = [];
        response.data.forEach(val => {
          data2.push(val.count)
        })
        this.chartOpt8 = this.$eChartFn.getLineChart(data1,data2);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    onVitalityByTime(value){
      this.getVitalityByTime(value);
    },
    getExpertCountByTime(value){
      this.$api.zjk.home.getExpertCountByTime(value).then(response => {
        const data1 = [];
        response.data.forEach(val => {
          data1.push(val.time)
        })
        const data2 = [];
        response.data.forEach(val => {
          data2.push(val.count)
        })
        this.chartOpt4 = this.$eChartFn.getLineChart(data1,data2);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    onExpertCountByTime(value){
      this.getExpertCountByTime(value)
    },
    clickToIndex(data,param){
      const query = {}
      query[param] = data.data.lableValue
      this.$router.push({
        path:'/zjk/expert/expert-index',
        query
      })
    },
    getRankClass(index) {
      return ['dashboard-rank__cell', { 'dashboard-rank__cell--top': index < 3 }];
    },
    getAgeDistribution(){
      this.$api.zjk.home.getAgeDistribution(this.queryParams).then(response => {
        const ydata = response.data.map(val=>Object.keys(val)[0])
        const seriesData =  response.data.map(val=>Object.values(val)[0])
        this.chartOpt7 = this.$eChartFn.getBarChart2([],{
          xAxis: {
            type: 'value',
            name: '人数',
            // axisLabel: {
            //   formatter: '{value}'
            // }
          },
          series: [{
            data: seriesData,
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              formatter(d) {
                return  `${d.data}`;
              },
            },
          }],
          yAxis: {
            type: 'category',
            data: ydata,
            inverse: true,
            axisTick: { // 去除刻度线
              show: false
            },
            // animationDuration: 300,
            // animationDurationUpdate: 300,
            // max: 2 // only the largest 3 bars will be displayed
          },
        })
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByDept(){
      this.$api.zjk.home.getByDept().then(response=>{
        this.deptRankData = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getExpertProjectCount(){
      this.$api.zjk.home.getExpertProjectCount().then(response => {
        // const data1 = [];
        // response.data.forEach(val => {
        //   data1.push(val.year)
        // })
        // const data2 = [];
        // response.data.forEach(val => {
        //   data2.push(val.count)
        // })
        // this.chartOpt4 = this.$eChartFn.getLineChart(data1,data2);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    // getExpertCountByYear(){
    //   this.$api.zjk.home.getExpertCountByYear().then(response => {
    //     const data1 = [];
    //     response.data.forEach(val => {
    //       data1.push(val.year)
    //     })
    //     const data2 = [];
    //     response.data.forEach(val => {
    //       data2.push(val.count)
    //     })
    //     this.chartOpt4 = this.$eChartFn.getLineChart(data1,data2);
    //   }).catch((e) => {
    //     this.$message.error(e.toString());
    //   });
    // },
    getByEducation() {
      this.$api.zjk.home.getByEducation().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt3 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByDegree() {
      this.$api.zjk.home.getByDegree().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt6 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByProfTit() {
      this.$api.zjk.home.getByProftit().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt2 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByRecommendMajor() {
      this.$api.zjk.home.getByRecommendMajor().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt1 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    }
  }
}
</script>

<style lang="less" scoped>
.card{
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-medium);
  background-color: var(--td-bg-color-container);
  padding: 10px 10px;
  .header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 10px;
    position: relative;
    .title{
      font: var(--td-font-title-medium);
      color: var(--td-text-color-primary);
      margin-right: var(--td-comp-margin-l);
      word-break: break-all;
    }
  }
}

@import '@/style/variables.less';
.dashboard-rank-card{
  height: 100%;
}
.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: @gray-color-5;
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: @brand-color;
  }
}
</style>
